/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import React, { Fragment, Component } from "react";
import { StyleSheet } from "react-native";
import Home from "./app/pages/home/index";
import Shoper from "./app/pages/shoper/index";
import My from "./app/pages/my/index";
import More from "./app/pages/more/index";
import Launch from "./app/pages/launch/index";
import {
  createStackNavigator,
  createAppContainer,
  createBottomTabNavigator,
  createDrawerNavigator
} from "react-navigation";
import FontAwesome from "react-native-vector-icons/FontAwesome";
class App extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <Fragment>
        <FirstPage />
      </Fragment>
    );
  }
}

const styles = StyleSheet.create({});
const SimpleTopNavigator = createBottomTabNavigator(
  {
    page1: {
      screen: Home,
      navigationOptions: {
        tabBarLabel: "主页", // tabBar显示的文字
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome name={"home"} size={26} color={tintColor} />
        )
      }
    },
    page2: {
      screen: Shoper,
      navigationOptions: {
        tabBarLabel: "商家", // tabBar显示的文字
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome name={"shopping-bag"} size={26} color={tintColor} />
        )
      }
    },
    page3: {
      screen: My,
      navigationOptions: {
        tabBarLabel: "我的", // tabBar显示的文字
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome name={"heart"} size={26} color={tintColor} />
        )
      }
    },
    page4: {
      screen: More,
      navigationOptions: {
        tabBarLabel: "更多", // tabBar显示的文字
        tabBarIcon: (
          { tintColor } // tabBar显示的图标
        ) => (
          // 这里使用了react-native-vector-icons, 不熟悉的请看上方连接
          <FontAwesome name={"star"} size={26} color={tintColor} />
        )
      }
    }
  },
  {
    initialRouteName: "page1",
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "orange"
    }
  }
);
const AppRouter = createAppContainer(SimpleTopNavigator);
const SimpleAppNavigator = createStackNavigator(
  {
    main: {
      screen: AppRouter
      // navigationOptions: {
      //   title: "登录",
      //   //右边
      //   headerRight: (
      //     <TouchableOpacity style={{ backgroundColor: "#fff" }}>
      //       <Text
      //         style={{
      //           color: "#000",
      //           fontSize: 20,
      //           fontWeight: "bold",
      //           marginRight: 10
      //         }}
      //       >
      //         右边
      //       </Text>
      //     </TouchableOpacity>
      //   )
      // }
    },
    launch: {
      screen: Launch
    }
  },
  {
    initialRouteName: "launch",
    headerMode: "none"
  }
);

const FirstPage = createAppContainer(SimpleAppNavigator);
export default App;
